import React from 'react';
import styles from './index.less';
const UA = require('ua-device');

class BasicLayout extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      ua: new UA(navigator.userAgent),
      isMobile: null,
    }

    // 超屏占比时，设定最大屏幕宽高
    this.maxWidth = 414;
    this.maxHeight = 736;
  }

  componentDidMount() {
    this.deviceCheck();
    window.addEventListener('resize', this.deviceCheck);
  }

  deviceCheck = () => {
    setTimeout(() => {
      const ua = new UA(navigator.userAgent);
      const isPhone = ['iOS', 'Android'].some(device => device === ua.os.name);
      let screenWidth = document.documentElement.clientWidth;
      let screenHeight = document.documentElement.clientHeight;

      let isMobile = true;
      // 非手机端设置，超出屏幕高宽值后，不支持此设备显示
      if(!isPhone && (screenWidth > this.maxWidth || screenHeight > this.maxHeight)) {
        isMobile = false;
      }
      // 设置浏览器标识
      this.setState({ isMobile, ua });
    })
  }

  deviceDoesNotSupportView = () => {
    const { ua } = this.state;
    let screenWidth = document.documentElement.clientWidth;
    let screenHeight = document.documentElement.clientHeight;
    return (
      <div className={styles.support}>
        <div className={styles.wrap}>
          <div className={styles.title}>
            <span>五子棋</span>

            <div className={styles.tips}>
              <div>-- 本游戏仅适配了手机端，请使用手机浏览器打开 -- </div>
            </div>

            {/*<span>感谢朋友提供的PC适配：<a href={'https://aixt.hanhais.com'}>https://aixt.hanhais.com</a></span>*/}
            {/*<hr/>*/}
            <span>我是作者：小天(QQ：420298524)</span>
            <span>[五子棋]所有素材均来源于网络(图片、音效、字体)</span>
            <span>本着学习的精神，构建了本游戏</span>
            <span>欢迎点赞收藏，您的支持是我最大的动力</span>
          </div>
          <div className={styles.floor}>
            <p>
              浏览器：<span>{ua.browser.name}</span>
              系统：<span>{ua.os.name}</span>
              内核：<span>{ua.engine.name}</span>
              屏幕宽高：<span>{screenWidth} * {screenHeight}</span>
            </p>
            <p>
            </p>
          </div>
        </div>
      </div>
    )
  }

  render() {
    const { isMobile } = this.state;
    return (
      <React.Fragment>
        {
          isMobile != null && (isMobile
            ? <div className={styles.background}>{this.props.children}</div>
            : this.deviceDoesNotSupportView())
        }
      </React.Fragment>
    );
  }
}

export default BasicLayout;

